<template>
	<el-drawer
	  v-model="dialog.visible"
	  :title="dialog.title"
	  append-to-body
	  @close="closeDialog"
	  :close-on-click-modal="false"
	  size="750"
	>
		
		<el-form
			ref="formRef"
			:model="formData"
			:rules="formRules"
			label-width="110px"
		>
			
			<div v-for="item in testData.params">
				<el-form-item :label="item.name" :prop="item.identifier" v-if="item.type=='string'">
					<el-input v-model="formData[item.identifier]" :placeholder="item.name" />
				</el-form-item>
			</div>
			
			<div v-if="sqlResult" class="sql-result">
				<div class="section-title">
					<span class="title-form_primary">执行结果</span>
				</div>
				<div class="result-content">
					<MonacoEditor
						v-model="sqlResult"
						language="json"
						:options="{ 
							readOnly: true,
							minimap: { enabled: false },
							lineNumbers: 'off',
							scrollBeyondLastLine: false,
							wordWrap: 'on'
						}"
						class="result-editor"
						style="height: 500px;"
					/>
				</div>
			</div>
		</el-form>
	
		<template #footer>
		  <div class="dialog-footer">
			<el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
			<el-button @click="closeDialog" :loading="loading">取 消</el-button>
		  </div>
		</template>
	</el-drawer>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import type {FormRules } from 'element-plus'
	import { ElMessage } from "element-plus";
	import { reactive } from "vue";
	import { onMounted } from "vue";
	import DatasourceAPI from "@/api/biz/datasource";
	import MonacoEditor from '@/components/MonacoEditor/index.vue';
	const emit = defineEmits(['success', 'closed']);
	const loading = ref(false);
	const sqlResult = ref('');
	const dialog = ref({
		visible:false,
		title:'',
	});
	const formRef=ref();
	const formRules=reactive<FormRules>({
	});
	
	//数据源
	const formData=ref<any>({
	});
	
	const testData=ref<any>({
	});
	
	
	async function openDialog(_row?: any) {
		dialog.value.visible=true;
		dialog.value.title='校验Sql';
		testData.value=JSON.parse(JSON.stringify(_row));
		sqlResult.value = '';
		
		// 动态添加表单验证规则
		const rules: any = {};
		testData.value.params?.forEach((param: any) => {
			if (param.required === '1') {
				rules[param.identifier] = [
					{ required: true, message: `请输入${param.name}`, trigger: 'blur' }
				];
			}
		});
		formRules.value = rules;
	}
	
	const submitForm=()=>{
		formRef.value.validate((isValid: boolean) => {
			if (isValid) {
				loading.value = true;
				DatasourceAPI.execSql({
					datasourceId:testData.value?.datasourceId,
					content:testData.value?.content,
					fields:testData.value?.params,
					values:formData.value,
				})
				.then((data:any) => {
					console.log("sqlResult.value=",sqlResult.value);
					sqlResult.value = JSON.stringify(data, null, 2);
					ElMessage.success("成功");
				})
				.finally(() => (loading.value = false));
			}
		});
	}
	
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		sqlResult.value = '';
		emit('closed')
		resetForm();
	}
	
	/**
	 * 重置表单
	 */
	function resetForm() {
		formRef.value.resetFields();
		formRef.value.clearValidate();
		formData.value={};
	}	
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
</script>

<style scoped>
	.step-content{
		background-color: aliceblue;
		margin-top: 8px;
		padding: 8px;
		padding-top: 16px;
	}
	
	.sql-result {
		margin-top: 20px;
		border: 1px solid var(--el-border-color-light);
		border-radius: 4px;
	}
	
	.section-title {
		padding: 8px 16px;
		border-bottom: 1px solid var(--el-border-color-light);
		background-color: var(--el-bg-color-page);
	}
	
	.result-content {
		padding: 16px;
	}
	
	.result-editor {
		height: auto;
		border: 1px solid var(--el-border-color-light);
		border-radius: 4px;
	}
</style>